<html>
    <head>
        <meta charset="UTF-8">
        <title>表单验证2</title>
    <!--
          方法2；
          3、失去焦点事件是：blur事件，事件句柄：onblur
          4、调用验证方法，将用户传递给该方法，this.value
          5、验证那些？
           5.1 验证用户名不为空
           5.2 验证用户名长度必须在【6-14】之间
        6、文本框获取焦点事件focus onfocus
        7、表单提交事件：submit 事件句柄onsubmit,这是事件句柄编辑到from标签里面
      -->

        <script type="text/javascript">
            // function checkUsername(){
            //     alert(username);
            // }
            function checkUsername(username){
               // if(username.length == 0)
               var usernameErrorMsg = document.getElementById("usernameErrorMsg");

                if(username == ""){
                    usernameErrorMsg.innerHTML = "<font color='red'>username is not null</font>";

                }else if(username.length < 6 || username.length > 14){
                    usernameErrorMsg.innerHTML = "<font color='red'>14 > username > 6</font>";
                }
                else{
                    usernameErrorMsg.innerHTML = ">";

                }

            }
            function clearNameError(){
                var usernameErrorMsg = document.getElementById("usernameErrorMsg");
                usernameErrorMsg="";

            }
            </script>
    </head>

    
    <body>
 
        <form name="userForm" method="GET" action="" onsubmit="return true">
            用户名
            <input type="text" name="username" name="username" onblur="checkUsername(this.value);" onfocus="clearNameError"/>
            <span id="usernameErrorMsg"></span>
            <br><br>

            <input type="submit" value="注册"/>


        </form>
    </body>

</html>
